<template>
  <div class="app-container">
    <!-- 基础信息 -->
    <h5 class="titleInfo">基础信息</h5>
    <el-form
      ref="form"
      v-loading="tableLoading"
      :inline="true"
      :model="form"
      :rules="rules"
      label-width="150px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="城市合伙人姓名" prop="realname">
            <el-input v-model="form.realname" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="城市合伙人手机号" prop="phone">
            <el-input v-model="form.phone" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号" prop="id_number">
            <el-input v-model="form.id_number" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行卡号" prop="bank_number">
            <el-input v-model="form.bank_number" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开户行" prop="bank_name">
            <el-input v-model="form.bank_name" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 签约信息 -->
      <div class="divBar" />
      <h5 class="titleInfo">签约信息</h5>
      <el-row>
        <el-col :span="12">
          <el-form-item label="发起人手机号" prop="promoter_phone">
            <el-input v-model="form.promoter_phone" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发起人姓名">
            <el-input v-model="form.agentName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="签署区域">
            <el-input v-model="form.partner_area" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="签署省份">
            <el-input v-model="form.partner_province" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="签署城市" prop="partner_city_id">
            <!-- @change="handleChange1" -->
            <el-select v-model="form.partner_city_id" placeholder="请选择" @change="handleCity">
              <el-option
                v-for="item in cityList"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="签署板块">
            <el-input v-model="form.module_name" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="关联医院" prop="hospital_ids">
            <el-select
              v-model="form.hospital_ids"
              multiple
              :multiple-limit="5"
              placeholder="请选择"
              @change="handleChange"
            >
              <el-option
                v-for="item in hospitalList"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 新增签约时间 -->
        <el-col :span="12">
          <el-form-item label="签署时间">
            <el-date-picker
              v-model="form.sign_time"
              type="datetime"
              placeholder="请选择"
              align="right"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button
          style="margin-top:30px;margin-left:130px"
          type="primary"
          @click="submitFn('form')"
        >立即提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  promoterAdd,
  promoterUpdate,
  partnerCreate,
  getPromoter,
  addParner,
  parnerDetail,
  parnerUpdate,
  getHospital,
} from "@/api/NewRetailSystem";
export default {
  name: "AddCityPartner",
  filters: {},
  data() {
    var validatePassword = (rule, value, callback) => {
      // const isRate = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
      const isRate = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,}$/;
      if (!value) {
        // alert('空')
        callback(new Error("请输入密码"));
        // this.warningStatus("请输入密码!");
      } else if (!isRate.test(value)) {
        callback(
          new Error("密码需不低于8位，至少使用一个字母+数字，不可使用特殊字符")
        );
        // this.warningStatus("请输入正确密码");
      } else {
        callback();
      }
    };
    return {
      form: {
        realname: "",
        phone: "",
        id_number: "",
        bank_number: "",
        bank_name: "",
        promoter_phone: "",
        partner_city_id: "",
        hospital_ids: "",
        sign_time: "",
        agentName: "",
        partner_area: "",
        partner_province: "",
        module_name: "",
      },
      tableLoading: false,
      provinces: [],
      Mechanisms: [],
      hospitalList: [],
      cityList: [],
      // city_id: "", //城市id
      module_id: "", // 板块id
      province_id: "", //省份id
      parnterId: "",
      type: "",
      rules: {
        realname: [
          {
            required: true,
            message: "请输入合伙人姓名",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入合伙人手机号",
            trigger: "blur",
          },
        ],
        id_number: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: "blur",
          },
        ],
        bank_number: [
          {
            required: true,
            message: "请输入银行卡号",
            trigger: "blur",
          },
        ],

        bank_name: [
          {
            required: true,
            message: "请输入开户行",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入合伙人手机号",
            trigger: "blur",
          },
        ],
        promoter_phone: [
          {
            required: true,
            message: "请输入发起人手机号",
            trigger: "blur",
          },
        ],
        partner_city_id: [
          {
            required: true,
            message: "请选择签署城市",
            trigger: "change",
          },
        ],
        hospital_ids: [
          {
            required: true,
            message: "请选择关联医院",
            trigger: "change",
          },
        ],
      },
    };
  },
  watch: {
    "form.promoter_phone"(val) {
      if (val) {
        if (val && val.length === 11) {
          this.handleBlur(val);
        }
      }
      // if (val.length === 11) {
      //   this.handleBlur(val);
      // } else {
      //   this.errorStatus("手机号不能为空");
      //   return false;
      // }
    },
  },
  // created() {
  //   this.getSelectList();
  // },
  activated() {
    if (this.type == "edit") {
      this.$route.meta.title = "编辑城市合伙人";
      this.getDetails(this.parnterId);
      // this.handleCity();
    }
  },
  mounted() {
    // this.getMechanismList();
    // this.getSelectList();
    this.parnterId = Number(this.$route.query.id);
    this.type = this.$route.query.type;
    console.log("111", this.$route.query);
    if (this.type == "edit") {
      this.$route.meta.title = "编辑城市合伙人";
      this.getDetails(this.parnterId);
      // this.handleCity();
    } else {
      this.$route.meta.title = "添加城市合伙人";
      // this.getSelectList()
    }
  },
  methods: {
    // 获取详情
    getDetails(id) {
      const data = { id };
      parnerDetail(data).then((res) => {
        // console.log("res3", res.data);
        if (res.data.code == 0) {
          const resData = res.data.data;
          this.form.realname = resData.realname;
          this.form.phone = resData.phone;
          this.form.id_number = resData.id_number;
          this.form.bank_number = resData.bank_number;
          this.form.bank_name = resData.bank_name;
          this.form.partner_area = resData.partner_area;
          this.form.partner_province = resData.partner_province;
          this.form.partner_city = resData.partner_city;
          this.form.sign_time = resData.sign_time;
          this.form.module_name = resData.module_name;
          this.form.promoter_phone = resData.promoterInfo.phone;
          this.form.agentName = resData.promoterInfo.realname;
          this.module_id = resData.module_id;
          this.province_id = resData.partner_province_id;
          if (resData.cityArray.length > 0) {
            const arr = [];
            resData.cityArray.forEach((item) => {
              arr.push({
                label: item.area_name,
                value: item.id,
              });
            });
            this.cityList = arr;
            this.form.partner_city_id = resData.partner_city_id;
          }
          if (this.form.partner_city_id && this.module_id && this.province_id) {
            this.getHospitalList();
          }
          let arr1 = [];
          if (resData.hospitalArray.length > 0) {
            resData.hospitalArray.forEach((item) => {
              // arr.push({
              //   label: item.name,
              //   value: item.id,
              // });
              // arr[item.id] = item.name;
              arr1.push(item.id);
            });
          }
          this.form.hospital_ids = arr1;
          // const arr1 = [];
          // const arr2 = resData.hospital_ids.split(",");
          // arr2.forEach(function (data, index, arr) {
          //   arr1.push(+data);
          // });
          // if (resData.hospitalArray) {
          //   const arr = [];
          //   resData.hospitalArray.forEach((item) => {
          //     arr.push({
          //       label: item.name,
          //       value: item.id,
          //     });
          //   });
          //   this.hospitalList = arr;
          // }
          // this.form.hospital_ids = arr1;
          // this.getHospitalList();
        } else {
          this.errorStatus(res.data.message);
        }
      });
    },
    // 根据手机号获取发起人信息
    handleBlur(val) {
      if (!val) {
        return false;
      }
      const data = { phone: this.form.promoter_phone };
      getPromoter(data).then((res) => {
        if (res.data.code == 0) {
          const resData = res.data.data;
          // resData.realname
          this.form.agentName = resData.realname;
          this.form.partner_area = resData.partner_area;
          this.form.partner_province = resData.partner_province;
          this.form.module_name = resData.module_name;
          this.module_id = resData.module_id;
          this.province_id = resData.partner_province_id;
          if (resData.cityArray) {
            const arr = [];
            resData.cityArray.forEach((item) => {
              arr.push({
                label: item.area_name,
                value: item.id,
              });
            });
            this.cityList = arr;
          }
        } else {
          this.errorStatus(res.data.message);
        }
      });
    },
    // 获取城市id
    handleCity(e) {
      this.form.partner_city_id = e;
      this.getHospitalList();
    },
    getHospitalList() {
      let data = {
        module_id: this.module_id,
        province_id: this.province_id,
        city_id: this.form.partner_city_id,
      };
      this.form.hospital_ids = [];
      getHospital(data).then((res) => {
        if (res.data.code == 0) {
          const resData = res.data.data;
          const arr = [];
          if (resData.hospitalArray.length > 0) {
            resData.hospitalArray.forEach((item) => {
              arr.push({
                label: item.name,
                value: item.id,
              });
            });
          }
          this.hospitalList = arr;
        } else {
          this.errorStatus(res.data.message);
        }
      });
    },
    // 获取医院信息
    // getSelectList() {
    //   partnerCreate().then((res) => {
    //     // console.log("res", res.data);
    //     if (res.data.code == 0) {
    //       const resData = res.data.data;
    //       const arr = [];
    //       if (resData.hospitalArray) {
    //         resData.hospitalArray.forEach((item) => {
    //           arr.push({
    //             label: item.name,
    //             value: item.id,
    //           });
    //         });
    //         this.hospitalList = arr;
    //       }
    //     } else {
    //       this.errorStatus(res.data.message);
    //     }
    //   });
    // },
    handleChange(e) {
      console.log("e1", e);
      this.form.hospital_ids = e;
      // this.getSelectList();
      // this.getHospitalList();
    },
    // handleChange1(e) {
    //   console.log("e", e);
    //   this.form.partner_city_id = e;
    // },
    // 添加
    submitFn(form) {
      const data = {
        id: this.type == "edit" ? this.parnterId : "",
        realname: this.form.realname,
        phone: this.form.phone,
        id_number: this.form.id_number,
        bank_number: this.form.bank_number,
        bank_name: this.form.bank_name,
        promoter_phone: this.form.promoter_phone,
        partner_city_id: this.form.partner_city_id,
        hospital_ids: this.form.hospital_ids.join(","),
        sign_time: this.form.sign_time,
      };
      if (this.type == "edit") {
        this.$refs[form].validate((valid) => {
          if (valid) {
            parnerUpdate(data).then((res) => {
              // console.log("res5", res.data);
              if (res.data.code == 0) {
                this.warnStatus("修改成功", "success");
                this.$router.push("/CityPartnerManagement");
              } else {
                this.errorStatus(res.data.message);
              }
            });
          }
        });
      } else {
        this.$refs[form].validate((valid) => {
          if (valid) {
            addParner(data).then((res) => {
              // console.log("res2", res.data);
              if (res.data.code == 0) {
                this.warnStatus("添加成功", "success");
                this.$router.push("/CityPartnerManagement");
              } else {
                this.errorStatus(res.data.message);
              }
            });
          }
        });
      }
    },

    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status,
      });
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    },
    // 成功状态弹窗
    warnStatus(txt, status) {
      this.eleMsg(txt, status);
      // this.eleMsg(txt, "warning");
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 0px !important;
}
.form {
  margin-left: 268px;
}
.el-switch__label--left {
  margin-right: 0;
}
.el-switch__label.is-active {
  color: #409eff !important;
  width: 100%;
  text-align: center;
  display: inline-block;
}
</style>
